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

refactor(connect-events): add onClickConnect events

Browse Source
This commit is contained in:
moklick
2022-05-18 23:26:56 +02:00
parent f1909a735d
commit 0d3439903c
9 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/package-lock.json
Generated
+3 -1
View File
@@ -27,7 +27,7 @@
},
"..": {
"name": "react-flow-renderer",
"version": "10.2.3-next.1",
"version": "10.2.3",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.17.9",
@@ -53,6 +53,7 @@
"@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.7",
"babel-preset-react-app": "^10.0.1",
"cross-env": "^7.0.3",
"cypress": "^9.6.1",
"postcss": "^8.4.13",
"postcss-cli": "^9.1.0",
@@ -31536,6 +31537,7 @@
"autoprefixer": "^10.4.7",
"babel-preset-react-app": "^10.0.1",
"classcat": "^5.0.3",
"cross-env": "^7.0.3",
"cypress": "^9.6.1",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
example/src/Overview/index.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
import { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
import ReactFlow, {
addEdge,
MiniMap,
@@ -162,7 +162,7 @@ const nodeColor = (n: Node): string => {
const OverviewFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlow
example/src/TouchDevice/index.tsx
+9 -1
View File
@@ -33,7 +33,11 @@ const initialEdges: Edge[] = [];
const TouchDeviceFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), []);
const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
const onConnectStart = useCallback(() => console.log('connect start'), []);
const onConnectStop = useCallback(() => console.log('connect end'), []);
const onClickConnectStart = useCallback(() => console.log('click connect start'), []);
const onClickConnectStop = useCallback(() => console.log('click connect end'), []);
return (
<ReactFlow
@@ -42,6 +46,10 @@ const TouchDeviceFlow = () => {
onConnect={onConnect}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnectStart={onConnectStart}
onConnectStop={onConnectStop}
onClickConnectStart={onClickConnectStart}
onClickConnectStop={onClickConnectStop}
className="touchdevice-flow"
/>
);
src/components/Handle/index.tsx
+9 -3
View File
@@ -18,6 +18,9 @@ const selector = (s: ReactFlowState) => ({
onConnectStart: s.onConnectStart,
onConnectStop: s.onConnectStop,
onConnectEnd: s.onConnectEnd,
onClickConnectStart: s.onClickConnectStart,
onClickConnectStop: s.onClickConnectStop,
onClickConnectEnd: s.onClickConnectEnd,
connectionMode: s.connectionMode,
connectionStartHandle: s.connectionStartHandle,
connectOnClick: s.connectOnClick,
@@ -47,6 +50,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
onConnectStart,
onConnectStop,
onConnectEnd,
onClickConnectStart,
onClickConnectStop,
onClickConnectEnd,
connectionMode,
connectionStartHandle,
connectOnClick,
@@ -95,7 +101,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
const onClick = (event: React.MouseEvent) => {
if (!connectionStartHandle) {
onConnectStart?.(event, { nodeId, handleId, handleType: type });
onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
store.setState({ connectionStartHandle: { nodeId, type, handleId } });
return;
}
@@ -111,13 +117,13 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
doc
);
onConnectStop?.(event as unknown as MouseEvent);
onClickConnectStop?.(event as unknown as MouseEvent);
if (isValid) {
onConnectExtended(connection);
}
onConnectEnd?.(event as unknown as MouseEvent);
onClickConnectEnd?.(event as unknown as MouseEvent);
store.setState({ connectionStartHandle: null });
};
src/components/StoreUpdater/index.tsx
+10 -1
View File
@@ -19,7 +19,7 @@ import {
DefaultEdgeOptions,
FitViewOptions,
OnNodesDelete,
OnEdgesDelete
OnEdgesDelete,
} from '../../types';
interface StoreUpdaterProps {
@@ -31,6 +31,9 @@ interface StoreUpdaterProps {
onConnectStart?: OnConnectStart;
onConnectStop?: OnConnectStop;
onConnectEnd?: OnConnectEnd;
onClickConnectStart?: OnConnectStart;
onClickConnectStop?: OnConnectStop;
onClickConnectEnd?: OnConnectEnd;
nodesDraggable?: boolean;
nodesConnectable?: boolean;
minZoom?: number;
@@ -88,6 +91,9 @@ const StoreUpdater = ({
onConnectStart,
onConnectStop,
onConnectEnd,
onClickConnectStart,
onClickConnectStop,
onClickConnectEnd,
nodesDraggable,
nodesConnectable,
minZoom,
@@ -133,6 +139,9 @@ const StoreUpdater = ({
useDirectStoreUpdater('onConnectStart', onConnectStart, store.setState);
useDirectStoreUpdater('onConnectStop', onConnectStop, store.setState);
useDirectStoreUpdater('onConnectEnd', onConnectEnd, store.setState);
useDirectStoreUpdater('onClickConnectStart', onClickConnectStart, store.setState);
useDirectStoreUpdater('onClickConnectStop', onClickConnectStop, store.setState);
useDirectStoreUpdater('onClickConnectEnd', onClickConnectEnd, store.setState);
useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState);
useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState);
useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState);
src/container/ReactFlow/index.tsx
+6
View File
@@ -68,6 +68,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onConnectStart,
onConnectStop,
onConnectEnd,
onClickConnectStart,
onClickConnectStop,
onClickConnectEnd,
onNodeMouseEnter,
onNodeMouseMove,
onNodeMouseLeave,
@@ -216,6 +219,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onConnectStart={onConnectStart}
onConnectStop={onConnectStop}
onConnectEnd={onConnectEnd}
onClickConnectStart={onClickConnectStart}
onClickConnectStop={onClickConnectStop}
onClickConnectEnd={onClickConnectEnd}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
elementsSelectable={elementsSelectable}
src/hooks/useDrag/index.ts
+1 -1
View File
@@ -148,7 +148,7 @@ function useDrag({
.filter((event: MouseEvent) => {
const target = event.target as HTMLDivElement;
const filter =
!event.ctrlKey && !event.button && (!noDragClassName || !target.className?.includes?.(noDragClassName));
!event.ctrlKey && !event.button && (!noDragClassName || !target.classList?.contains?.(noDragClassName));
return handleSelector
? selectorExistsTargetToNode(target as HTMLDivElement, handleSelector, nodeRef) && filter
: filter;
src/types/component-props.ts
+3
View File
@@ -65,6 +65,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
onConnectStart?: OnConnectStart;
onConnectStop?: OnConnectStop;
onConnectEnd?: OnConnectEnd;
onClickConnectStart?: OnConnectStart;
onClickConnectStop?: OnConnectStop;
onClickConnectEnd?: OnConnectEnd;
onInit?: OnInit;
onMove?: OnMove;
onMoveStart?: OnMoveStart;
src/types/general.ts
+4
View File
@@ -165,6 +165,10 @@ export type ReactFlowStore = {
onConnectStop?: OnConnectStop;
onConnectEnd?: OnConnectEnd;
onClickConnectStart?: OnConnectStart;
onClickConnectStop?: OnConnectStop;
onClickConnectEnd?: OnConnectEnd;
connectOnClick: boolean;
defaultEdgeOptions?: DefaultEdgeOptions;