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

feat(props): add mouse event to onConnectStart and onConnectStop

Browse Source
This commit is contained in:
Nate Amack
2020-08-04 12:22:38 -06:00
parent 97ec24fa14
commit fddb3e777d
4 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -88,8 +88,8 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
- `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave
- `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu
- `onConnect({ source, target })`: called when user connects two nodes
- `onConnectStart({ nodeId, handleType })`: called when user starts to drag connection line
- `onConnectStop()`: called when user stops to drag connection line
- `onConnectStart(evt: MouseEvent, { nodeId, handleType })`: called when user starts to drag connection line
- `onConnectStop(evt: MouseEvent)`: called when user stops to drag connection line
- `onLoad(reactFlowInstance)`: called after flow is initialized
- `onMove()`: called when user is panning or zooming
- `onMoveStart()`: called when user starts panning or zooming

4
example/src/Validation/index.js
View File

@@ -15,9 +15,9 @@ const isValidConnection = (connection) => connection.target === 'B';
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
const onConnectStart = (evt, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
const onConnectStop = () => console.log('on connect stop');
const onConnectStop = (evt) => console.log('on connect stop', evt);
const CustomInput = () => (
<>

4
src/components/Handle/BaseHandle.tsx
View File

@@ -66,7 +66,7 @@ function onMouseDown(
setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleType: handleType });
if (onConnectStart) {
onConnectStart({ nodeId, handleType });
onConnectStart(evt, { nodeId, handleType });
}
function resetRecentHandle(): void {
@@ -142,7 +142,7 @@ function onMouseDown(
setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null });
if (onConnectStop) {
onConnectStop();
onConnectStop(evt);
}
document.removeEventListener('mousemove', onMouseMove);

22
src/types/index.ts
View File

@@ -1,4 +1,4 @@
import { CSSProperties, MouseEvent } from 'react';
import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
export type ElementId = string;
@@ -154,13 +154,13 @@ export interface WrapNodeProps {
isDraggable: boolean;
isConnectable: boolean;
selectNodesOnDrag: boolean;
onClick?: (evt: MouseEvent, node: Node) => void;
onMouseEnter?: (evt: MouseEvent, node: Node) => void;
onMouseMove?: (evt: MouseEvent, node: Node) => void;
onMouseLeave?: (evt: MouseEvent, node: Node) => void;
onContextMenu?: (evt: MouseEvent, node: Node) => void;
onNodeDragStart?: (evt: MouseEvent, node: Node) => void;
onNodeDragStop?: (evt: MouseEvent, node: Node) => void;
onClick?: (evt: ReactMouseEvent, node: Node) => void;
onMouseEnter?: (evt: ReactMouseEvent, node: Node) => void;
onMouseMove?: (evt: ReactMouseEvent, node: Node) => void;
onMouseLeave?: (evt: ReactMouseEvent, node: Node) => void;
onContextMenu?: (evt: ReactMouseEvent, node: Node) => void;
onNodeDragStart?: (evt: ReactMouseEvent, node: Node) => void;
onNodeDragStop?: (evt: ReactMouseEvent, node: Node) => void;
style?: CSSProperties;
className?: string;
sourcePosition?: Position;
@@ -202,8 +202,8 @@ export type OnConnectStartParams = {
nodeId: ElementId | null;
handleType: HandleType | null;
};
export type OnConnectStartFunc = (params: OnConnectStartParams) => void;
export type OnConnectStopFunc = () => void;
export type OnConnectStartFunc = (evt: ReactMouseEvent, params: OnConnectStartParams) => void;
export type OnConnectStopFunc = (evt: MouseEvent) => void;
export type SetConnectionId = {
connectionNodeId: ElementId | null;
@@ -235,7 +235,7 @@ export interface EdgeCompProps {
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
onClick?: (evt: MouseEvent, edge: Edge) => void;
onClick?: (evt: ReactMouseEvent, edge: Edge) => void;
animated?: boolean;
selected?: boolean;
data?: any;