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

refactor(handles): add connectionStart and connectionEnd handle to store, cleanup

Browse Source
This commit is contained in:
moklick
2023-03-27 12:56:57 +02:00
parent 2fd5319cf2
commit 395a1586c3
9 changed files with 94 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/src/examples/Validation/ConnectionStatus.tsx
+18 -10
View File
@@ -6,15 +6,21 @@ import styles from './validation.module.css';
const selector = (state: ReactFlowState) => ({
connectionPosition: state.connectionPosition,
connectionStatus: state.connectionStatus,
connectionNodeId: state.connectionNodeId,
connectionTargetNodeId: state.connectionTargetNodeId,
connectionStartNodeId: state.connectionStartHandle?.nodeId,
connectionStartHandleType: state.connectionStartHandle?.type,
connectionEndNodeId: state.connectionEndHandle?.nodeId,
connectionEndHandleType: state.connectionEndHandle?.type,
});
function ConnectionStatus() {
const { connectionPosition, connectionStatus, connectionNodeId, connectionTargetNodeId } = useStore(
selector,
shallow
);
const {
connectionPosition,
connectionStatus,
connectionStartNodeId,
connectionStartHandleType,
connectionEndNodeId,
connectionEndHandleType,
} = useStore(selector, shallow);
if (!connectionPosition) {
return null;
@@ -22,15 +28,17 @@ function ConnectionStatus() {
return (
<div className={styles.connectionstatus}>
{connectionNodeId ? (
{connectionStartNodeId ? (
<>
<div>
<strong>connection info</strong>
</div>
<div>position: {JSON.stringify(connectionPosition)}</div>
<div>status: {JSON.stringify(connectionStatus)}</div>
<div>source node id: {JSON.stringify(connectionNodeId)}</div>
<div>target node id: {JSON.stringify(connectionTargetNodeId)}</div>
<div>status: {connectionStatus}</div>
<div>from node id: {connectionStartNodeId}</div>
<div>from handle type: {connectionStartHandleType}</div>
<div>to node id: {connectionEndNodeId}</div>
<div>to handle type: {connectionEndHandleType}</div>
</>
) : (
'no connection data'
examples/vite-app/src/examples/Validation/index.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ const CustomInput: FC<NodeProps> = () => (
const CustomNode: FC<NodeProps> = ({ id }) => (
<>
<Handle type="target" position={Position.Left} />
<Handle type="target" position={Position.Left} isConnectableStart={false} />
<div>{id}</div>
<Handle type="source" position={Position.Right} />
</>
packages/core/src/components/Handle/handler.ts
+9 -5
View File
@@ -89,12 +89,17 @@ export function handlePointerDown({
setState({
connectionPosition,
connectionStatus: null,
// connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
connectionNodeId: nodeId,
connectionHandleId: handleId,
connectionHandleType: handleType,
connectionStatus: null,
connectionTargetNodeId: null,
connectionTargetHandleId: null,
connectionStartHandle: {
nodeId,
handleId,
type: handleType,
},
connectionEndHandle: null,
});
onConnectStart?.(event, { nodeId, handleId, handleType });
@@ -141,8 +146,7 @@ export function handlePointerDown({
)
: connectionPosition,
connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid),
connectionTargetNodeId: connection.target,
connectionTargetHandleId: connection.targetHandle,
connectionEndHandle: result.endHandle,
});
if (!prevClosestHandle && !isValid && !handleDomNode) {
packages/core/src/components/Handle/index.tsx
+37 -23
View File
@@ -7,8 +7,7 @@ import { useNodeId } from '../../contexts/NodeIdContext';
import { handlePointerDown } from './handler';
import { getHostForElement, isMouseEvent } from '../../utils';
import { addEdge } from '../../utils/graph';
import { Position } from '../../types';
import type { HandleProps, Connection, ReactFlowState } from '../../types';
import { type HandleProps, type Connection, type ReactFlowState, HandleType, Position } from '../../types';
import { isValidHandle } from './utils';
import { errorMessages } from '../../contants';
@@ -22,6 +21,23 @@ const selector = (s: ReactFlowState) => ({
noPanClassName: s.noPanClassName,
});
const connectingSelector =
(nodeId: string | null, handleId: string | null, type: HandleType) => (state: ReactFlowState) => {
const {
connectionStartHandle: startHandle,
connectionEndHandle: endHandle,
connectionClickStartHandle: clickHandle,
} = state;
return {
connecting:
(startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
(endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
clickConnecting:
clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
};
};
const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
(
{
@@ -41,20 +57,17 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
},
ref
) => {
const handleId = id || null;
const isTarget = type === 'target';
const store = useStoreApi();
const nodeId = useNodeId();
const { connectOnClick, noPanClassName } = useStore(selector, shallow);
const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type));
if (!nodeId) {
store.getState().onError?.('010', errorMessages['error010']());
return null;
}
const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
const handleId = id || null;
const isTarget = type === 'target';
const onConnectExtended = (params: Connection) => {
const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState();
@@ -72,6 +85,10 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
};
const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
if (!nodeId) {
return;
}
const isMouseTriggered = isMouseEvent(event);
if (isConnectableStart && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
@@ -98,17 +115,18 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
const {
onClickConnectStart,
onClickConnectEnd,
connectionClickStartHandle,
connectionMode,
isValidConnection: isValidConnectionStore,
} = store.getState();
if (!connectionStartHandle && !isConnectableStart) {
if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
return;
}
if (!connectionStartHandle) {
if (!connectionClickStartHandle) {
onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
store.setState({ connectionStartHandle: { nodeId, type, handleId } });
store.setState({ connectionClickStartHandle: { nodeId, type, handleId } });
return;
}
@@ -122,9 +140,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
type,
},
connectionMode,
connectionStartHandle.nodeId,
connectionStartHandle.handleId || null,
connectionStartHandle.type,
connectionClickStartHandle.nodeId,
connectionClickStartHandle.handleId || null,
connectionClickStartHandle.type,
isValidConnectionHandler,
doc
);
@@ -135,14 +153,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
onClickConnectEnd?.(event as unknown as MouseEvent);
store.setState({ connectionStartHandle: null });
store.setState({ connectionClickStartHandle: null });
};
const connecting =
connectionStartHandle?.nodeId === nodeId &&
connectionStartHandle?.handleId === handleId &&
connectionStartHandle?.type === type;
return (
<div
data-handleid={handleId}
@@ -161,9 +174,10 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
connectable: isConnectable,
connectablestart: isConnectableStart,
connectableend: isConnectableEnd,
connecting,
connecting: clickConnecting,
// this class is used to style the handle when the user is connecting
connectionindicator:
(isConnectable && isConnectableStart && !connecting) || (isConnectableEnd && connecting),
isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)),
},
])}
onMouseDown={onPointerDown}
packages/core/src/components/Handle/utils.ts
+10 -2
View File
@@ -1,6 +1,6 @@
import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
import { ConnectionMode, ConnectionStatus } from '../../types';
import { ConnectingHandle, ConnectionMode, ConnectionStatus } from '../../types';
import { getEventPosition, internalsSymbol } from '../../utils';
import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
@@ -59,6 +59,7 @@ type Result = {
handleDomNode: Element | null;
isValid: boolean;
connection: Connection;
endHandle: ConnectingHandle | null;
};
const nullConnection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null };
@@ -70,7 +71,7 @@ export function isValidHandle(
connectionMode: ConnectionMode,
fromNodeId: string,
fromHandleId: string | null,
fromType: string,
fromType: HandleType,
isValidConnection: ValidConnectionFunc,
doc: Document | ShadowRoot
) {
@@ -86,6 +87,7 @@ export function isValidHandle(
handleDomNode: handleToCheck,
isValid: false,
connection: nullConnection,
endHandle: null,
};
if (handleToCheck) {
@@ -113,6 +115,12 @@ export function isValidHandle(
: handleNodeId !== fromNodeId || handleId !== fromHandleId);
if (isValid) {
result.endHandle = {
nodeId: handleNodeId as string,
handleId,
type: handleType as HandleType,
};
result.isValid = isValidConnection(connection);
}
}
packages/core/src/store/index.ts
+2 -2
View File
@@ -275,8 +275,8 @@ const createRFStore = () =>
connectionHandleId: initialState.connectionHandleId,
connectionHandleType: initialState.connectionHandleType,
connectionStatus: initialState.connectionStatus,
connectionTargetNodeId: initialState.connectionTargetNodeId,
connectionTargetHandleId: initialState.connectionTargetHandleId,
connectionStartHandle: initialState.connectionStartHandle,
connectionEndHandle: initialState.connectionEndHandle,
}),
reset: () => set({ ...initialState }),
}));
packages/core/src/store/initialState.ts
+2 -2
View File
@@ -31,8 +31,6 @@ const initialState: ReactFlowStore = {
connectionNodeId: null,
connectionHandleId: null,
connectionHandleType: 'source',
connectionTargetNodeId: null,
connectionTargetHandleId: null,
connectionPosition: { x: 0, y: 0 },
connectionStatus: null,
connectionMode: ConnectionMode.Strict,
@@ -57,6 +55,8 @@ const initialState: ReactFlowStore = {
multiSelectionActive: false,
connectionStartHandle: null,
connectionEndHandle: null,
connectionClickStartHandle: null,
connectOnClick: true,
ariaLiveMessage: '',
packages/core/src/types/general.ts
+6 -4
View File
@@ -21,7 +21,7 @@ import type {
NodeOrigin,
} from './nodes';
import type { Edge, EdgeProps, WrapEdgeProps } from './edges';
import type { HandleType, StartHandle } from './handles';
import type { HandleType, ConnectingHandle } from './handles';
import type { DefaultEdgeOptions } from '.';
import type { ReactFlowInstance } from './instance';
@@ -167,10 +167,9 @@ export type ReactFlowStore = {
userSelectionActive: boolean;
userSelectionRect: SelectionRect | null;
// @todo remove this in next major version in favor of connectionStartHandle
connectionNodeId: string | null;
connectionHandleId: string | null;
connectionTargetNodeId: string | null;
connectionTargetHandleId: string | null;
connectionHandleType: HandleType | null;
connectionPosition: XYPosition;
connectionStatus: ConnectionStatus | null;
@@ -188,7 +187,10 @@ export type ReactFlowStore = {
multiSelectionActive: boolean;
connectionStartHandle: StartHandle | null;
connectionStartHandle: ConnectingHandle | null;
connectionEndHandle: ConnectingHandle | null;
// @todo this is only used for the click connection - we might remove this in the next major version
connectionClickStartHandle: ConnectingHandle | null;
onNodeDragStart?: NodeDragHandler;
onNodeDrag?: NodeDragHandler;
packages/core/src/types/handles.ts
+9 -8
View File
@@ -2,18 +2,19 @@ import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.'
export type HandleType = 'source' | 'target';
export interface HandleElement extends XYPosition, Dimensions {
id?: string | null;
position: Position;
}
export type HandleElement = XYPosition &
Dimensions & {
id?: string | null;
position: Position;
};
export interface StartHandle {
export type ConnectingHandle = {
nodeId: string;
type: HandleType;
handleId?: string | null;
}
};
export interface HandleProps {
export type HandleProps = {
type: HandleType;
position: Position;
isConnectable?: boolean;
@@ -22,4 +23,4 @@ export interface HandleProps {
onConnect?: OnConnect;
isValidConnection?: (connection: Connection) => boolean;
id?: string;
}
};