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

Merge pull request #2760 from wbkd/refactor/connectionline-handling

Browse Source 
Connection Radius
This commit is contained in:
Moritz Klack
2023-01-19 15:53:49 +01:00
committed by GitHub
parent e96309b6a5 66b3a8e334
commit a1e2788482
10 changed files with 261 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Handle/handler.ts
+86 -127
View File
@@ -2,73 +2,9 @@ import type { MouseEvent as ReactMouseEvent } from 'react';
import { StoreApi } from 'zustand';
import { getHostForElement, calcAutoPanVelocity } from '../../utils';
import { ConnectionMode } from '../../types';
import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
type ValidConnectionFunc = (connection: Connection) => boolean;
type Result = {
elementBelow: Element | null;
isValid: boolean;
connection: Connection;
isHoveringHandle: boolean;
};
// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
export function checkElementBelowIsValid(
event: MouseEvent,
connectionMode: ConnectionMode,
isTarget: boolean,
nodeId: string,
handleId: string | null,
isValidConnection: ValidConnectionFunc,
doc: Document | ShadowRoot
) {
const elementBelow = doc.elementFromPoint(event.clientX, event.clientY);
const elementBelowIsTarget = elementBelow?.classList.contains('target') || false;
const elementBelowIsSource = elementBelow?.classList.contains('source') || false;
const result: Result = {
elementBelow,
isValid: false,
connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
isHoveringHandle: false,
};
if (elementBelow && (elementBelowIsTarget || elementBelowIsSource)) {
result.isHoveringHandle = true;
const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
const connection: Connection = isTarget
? {
source: elementBelowNodeId,
sourceHandle: elementBelowHandleId,
target: nodeId,
targetHandle: handleId,
}
: {
source: nodeId,
sourceHandle: handleId,
target: elementBelowNodeId,
targetHandle: elementBelowHandleId,
};
result.connection = connection;
// in strict mode we don't allow target to target or source to source connections
const isValid =
connectionMode === ConnectionMode.Strict
? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
: elementBelowNodeId !== nodeId || elementBelowHandleId !== handleId;
if (isValid) {
result.isValid = isValidConnection(connection);
}
}
return result;
}
import type { OnConnect, HandleType, ReactFlowState } from '../../types';
import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
import { ConnectionHandle, getClosestHandle, getHandleLookup, isValidHandle, ValidConnectionFunc } from './utils';
function resetRecentHandle(hoveredHandle: Element): void {
hoveredHandle?.classList.remove('react-flow__handle-valid');
@@ -100,44 +36,46 @@ export function handleMouseDown({
}): void {
// when react-flow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement);
const { onConnectStart, movePane, connectionMode, domNode, autoPanOnConnect } = getState();
let connectionPosition: XYPosition = { x: 0, y: 0 };
const { connectionMode, domNode, autoPanOnConnect, connectionRadius, onConnectStart, onConnectEnd, panBy, getNodes } =
getState();
let autoPanId = 0;
let prevClosestHandle: ConnectionHandle | undefined;
const clickedElement = doc?.elementFromPoint(event.clientX, event.clientY);
const elementIsTarget = clickedElement?.classList.contains('target');
const elementIsSource = clickedElement?.classList.contains('source');
if (!domNode || (!elementIsTarget && !elementIsSource && !elementEdgeUpdaterType)) {
return;
}
const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementIsTarget ? 'target' : 'source';
const containerBounds = domNode.getBoundingClientRect();
let recentHoveredHandle: Element;
let connectionPosition = {
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top,
};
const handleLookup = getHandleLookup({
nodes: getNodes(),
nodeId,
handleId,
handleType,
});
// when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
const autoPan = (): void => {
if (!containerBounds || !autoPanOnConnect) {
if (!autoPanOnConnect) {
return;
}
const xMovement = calcAutoPanVelocity(connectionPosition.x, 35, containerBounds.width - 35) * 20;
const yMovement = calcAutoPanVelocity(connectionPosition.y, 35, containerBounds.height - 35) * 20;
movePane({ x: xMovement, y: yMovement });
panBy({ x: xMovement, y: yMovement });
autoPanId = requestAnimationFrame(autoPan);
};
if (!doc || !domNode) {
return;
}
const elementBelow = doc.elementFromPoint(event.clientX, event.clientY);
const elementBelowIsTarget = elementBelow?.classList.contains('target');
const elementBelowIsSource = elementBelow?.classList.contains('source');
if (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType) {
return;
}
const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
const containerBounds = domNode.getBoundingClientRect();
let recentHoveredHandle: Element;
connectionPosition = {
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top,
};
autoPan();
setState({
@@ -146,61 +84,82 @@ export function handleMouseDown({
connectionHandleId: handleId,
connectionHandleType: handleType,
});
onConnectStart?.(event, { nodeId, handleId, handleType });
function onMouseMove(event: MouseEvent) {
const { transform } = getState();
connectionPosition = {
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top,
};
setState({
connectionPosition,
});
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
event,
connectionMode,
isTarget,
nodeId,
handleId,
isValidConnection,
doc
prevClosestHandle = getClosestHandle(
pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
connectionRadius,
handleLookup
);
if (!isHoveringHandle) {
return resetRecentHandle(recentHoveredHandle);
}
setState({
connectionPosition: prevClosestHandle
? rendererPointToPoint(
{
x: prevClosestHandle.absX + prevClosestHandle.width / 2,
y: prevClosestHandle.absY + prevClosestHandle.height / 2,
},
transform
)
: connectionPosition,
});
if (connection.source !== connection.target && elementBelow) {
resetRecentHandle(recentHoveredHandle);
recentHoveredHandle = elementBelow;
elementBelow.classList.add('react-flow__handle-connecting');
elementBelow.classList.toggle('react-flow__handle-valid', isValid);
if (prevClosestHandle) {
const { connection, elementBelow, isValid, isHoveringHandle } = isValidHandle(
prevClosestHandle,
connectionMode,
nodeId,
handleId,
isTarget ? 'target' : 'source',
isValidConnection,
doc
);
if (!isHoveringHandle) {
return resetRecentHandle(recentHoveredHandle);
}
if (connection.source !== connection.target && elementBelow) {
resetRecentHandle(recentHoveredHandle);
recentHoveredHandle = elementBelow;
elementBelow.classList.add('react-flow__handle-connecting');
elementBelow.classList.toggle('react-flow__handle-valid', isValid);
}
}
}
function onMouseUp(event: MouseEvent) {
cancelAnimationFrame(autoPanId);
const { connection, isValid } = checkElementBelowIsValid(
event,
connectionMode,
isTarget,
nodeId,
handleId,
isValidConnection,
doc
);
if (prevClosestHandle) {
const { connection, isValid } = isValidHandle(
prevClosestHandle,
connectionMode,
nodeId,
handleId,
isTarget ? 'target' : 'source',
isValidConnection,
doc
);
if (isValid) {
onConnect?.(connection);
if (isValid) {
onConnect?.(connection);
}
}
getState().onConnectEnd?.(event);
onConnectEnd?.(event);
if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
onEdgeUpdateEnd(event);
if (elementEdgeUpdaterType) {
onEdgeUpdateEnd?.(event);
}
resetRecentHandle(recentHoveredHandle);
packages/core/src/components/Handle/index.tsx
+17 -7
View File
@@ -4,11 +4,12 @@ import { shallow } from 'zustand/shallow';
import { useStore, useStoreApi } from '../../hooks/useStore';
import { useNodeId } from '../../contexts/NodeIdContext';
import { checkElementBelowIsValid, handleMouseDown } from './handler';
import { getHostForElement } from '../../utils';
import { handleMouseDown } from './handler';
import { devWarn, getHostForElement } from '../../utils';
import { addEdge } from '../../utils/graph';
import { Position } from '../../types';
import type { HandleProps, Connection, ReactFlowState } from '../../types';
import { isValidHandle } from './utils';
const alwaysValid = () => true;
@@ -37,9 +38,13 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
ref
) => {
const store = useStoreApi();
const nodeId = useNodeId();
if (!nodeId) {
devWarn('Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
return null;
}
// @fixme: remove type assertion and handle nodeId === null
const nodeId = useNodeId() as string;
const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
const handleId = id || null;
@@ -86,12 +91,16 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
}
const doc = getHostForElement(event.target as HTMLElement);
const { connection, isValid } = checkElementBelowIsValid(
event as unknown as MouseEvent,
const { connection, isValid } = isValidHandle(
{
nodeId,
id: handleId,
type,
},
connectionMode,
connectionStartHandle.type === 'target',
connectionStartHandle.nodeId,
connectionStartHandle.handleId || null,
connectionStartHandle.type,
isValidConnection,
doc
);
@@ -110,6 +119,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
data-handleid={handleId}
data-nodeid={nodeId}
data-handlepos={position}
data-id={`${nodeId}-${handleId}-${type}`}
className={cc([
'react-flow__handle',
`react-flow__handle-${position}`,
packages/core/src/components/Handle/utils.ts
+143
View File
@@ -0,0 +1,143 @@
import { ConnectionMode, Node, NodeHandleBounds } from '../../types';
import type { Connection, HandleType, XYPosition } from '../../types';
import { internalsSymbol } from '../../utils';
export type ConnectionHandle = {
id: string | null;
type: HandleType;
nodeId: string;
absX: number;
absY: number;
width: number;
height: number;
};
export type ValidConnectionFunc = (connection: Connection) => boolean;
export function getHandles(
node: Node,
handleBounds: NodeHandleBounds,
type: HandleType,
currentHandle: string
): ConnectionHandle[] {
return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
if (`${node.id}-${h.id}-${type}` !== currentHandle) {
res.push({
id: h.id || null,
type,
nodeId: node.id,
absX: (node.positionAbsolute?.x ?? 0) + h.x,
absY: (node.positionAbsolute?.y ?? 0) + h.y,
width: h.width,
height: h.height,
});
}
return res;
}, []);
}
export function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: ConnectionHandle[]) {
let closestHandle: ConnectionHandle | undefined;
let minDistance = Infinity;
handles.forEach((handle) => {
const distance = Math.sqrt(Math.pow(handle.absX - pos.x, 2) + Math.pow(handle.absY - pos.y, 2));
if (distance <= connectionRadius && distance < minDistance) {
minDistance = distance;
closestHandle = handle;
}
});
return closestHandle;
}
type Result = {
elementBelow: Element | null;
isValid: boolean;
connection: Connection;
isHoveringHandle: boolean;
};
// checks if and returns connection in fom of an object { source: 123, target: 312 }
export function isValidHandle(
handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'>,
connectionMode: ConnectionMode,
fromNodeId: string,
fromHandleId: string | null,
fromType: string,
isValidConnection: ValidConnectionFunc,
doc: Document | ShadowRoot
) {
const result: Result = {
elementBelow: null,
isValid: false,
connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
isHoveringHandle: false,
};
const isTarget = fromType === 'target';
const elementBelow = doc.querySelector(
`.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
);
if (elementBelow) {
const elementBelowIsTarget = handle.type === 'target';
const elementBelowIsSource = handle.type === 'source';
result.isHoveringHandle = true;
const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
const connection: Connection = isTarget
? {
source: handle.nodeId,
sourceHandle: handle.id,
target: fromNodeId,
targetHandle: fromHandleId,
}
: {
source: fromNodeId,
sourceHandle: fromHandleId,
target: handle.nodeId,
targetHandle: handle.id,
};
result.connection = connection;
// in strict mode we don't allow target to target or source to source connections
const isValid =
connectionMode === ConnectionMode.Strict
? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
: elementBelowNodeId !== handle.nodeId || elementBelowHandleId !== handle.id;
if (isValid) {
result.isValid = isValidConnection(connection);
}
}
return result;
}
type GetHandleLookupParams = {
nodes: Node[];
nodeId: string;
handleId: string | null;
handleType: string;
};
export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHandleLookupParams) {
return nodes.reduce<ConnectionHandle[]>((res, node) => {
if (node[internalsSymbol]) {
const { handleBounds } = node[internalsSymbol];
let sourceHandles: ConnectionHandle[] = [];
let targetHandles: ConnectionHandle[] = [];
if (handleBounds) {
sourceHandles = getHandles(node, handleBounds, 'source', `${nodeId}-${handleId}-${handleType}`);
targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`);
}
res.push(...sourceHandles, ...targetHandles);
}
return res;
}, []);
}
packages/core/src/container/ReactFlow/index.tsx
+1
View File
@@ -162,6 +162,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
disableKeyboardA11y = false,
autoPanOnConnect = true,
autoPanOnNodeDrag = true,
connectionRadius = 20,
style,
id,
...rest
packages/core/src/hooks/useDrag/index.ts
+2 -2
View File
@@ -114,13 +114,13 @@ function useDrag({
const yMovement = calcAutoPanVelocity(mousePosition.current.y, 35, containerBounds.current.height - 35) * 20;
if (xMovement !== 0 || yMovement !== 0) {
const { transform, movePane } = store.getState();
const { transform, panBy } = store.getState();
lastPos.current.x = (lastPos.current.x ?? 0) - xMovement / transform[2];
lastPos.current.y = (lastPos.current.y ?? 0) - yMovement / transform[2];
updateNodes(lastPos.current as XYPosition);
movePane({ x: xMovement, y: yMovement });
panBy({ x: xMovement, y: yMovement });
}
autoPanId.current = requestAnimationFrame(autoPan);
};
packages/core/src/store/index.ts
+1 -1
View File
@@ -252,7 +252,7 @@ const createRFStore = () =>
nodeInternals: new Map(nodeInternals),
});
},
movePane: (delta: XYPosition) => {
panBy: (delta: XYPosition) => {
const { transform, width, height, d3Zoom, d3Selection, translateExtent } = get();
if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
packages/core/src/store/initialState.ts
+1
View File
@@ -58,6 +58,7 @@ const initialState: ReactFlowStore = {
ariaLiveMessage: '',
autoPanOnConnect: true,
autoPanOnNodeDrag: true,
connectionRadius: 20,
};
export default initialState;
packages/core/src/types/component-props.ts
+1
View File
@@ -141,6 +141,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
disableKeyboardA11y?: boolean;
autoPanOnNodeDrag?: boolean;
autoPanOnConnect?: boolean;
connectionRadius?: number;
};
export type ReactFlowRefType = HTMLDivElement;
packages/core/src/types/general.ts
+2 -1
View File
@@ -212,6 +212,7 @@ export type ReactFlowStore = {
ariaLiveMessage: string;
autoPanOnConnect: boolean;
autoPanOnNodeDrag: boolean;
connectionRadius: number;
};
export type ReactFlowActions = {
@@ -232,7 +233,7 @@ export type ReactFlowActions = {
cancelConnection: () => void;
reset: () => void;
triggerNodeChanges: (changes: NodeChange[]) => void;
movePane: (delta: XYPosition) => void;
panBy: (delta: XYPosition) => void;
};
export type ReactFlowState = ReactFlowStore & ReactFlowActions;
packages/core/src/utils/graph.ts
+7
View File
@@ -141,6 +141,13 @@ export const pointToRendererPoint = (
return position;
};
export const rendererPointToPoint = ({ x, y }: XYPosition, [tx, ty, tScale]: Transform): XYPosition => {
return {
x: x * tScale + tx,
y: y * tScale + ty,
};
};
export const getNodePositionWithOrigin = (
node: Node | undefined,
nodeOrigin: NodeOrigin = [0, 0]