{
grid={grid}
onStart={(event) => onStart(event as MouseEvent)}
onDrag={(event) => onDrag(event as MouseEvent)}
+ onStop={(event) => onStop(event as MouseEvent)}
>
void;
onPaneClick?: (event: MouseEvent) => void;
onPaneContextMenu?: (event: MouseEvent) => void;
+ onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
selectionKeyCode: number;
nodeTypes: NodeTypesType;
edgeTypes: EdgeTypesType;
@@ -84,6 +87,9 @@ const GraphView = ({
onNodeContextMenu,
onNodeDragStart,
onNodeDragStop,
+ onSelectionDragStart,
+ onSelectionDrag,
+ onSelectionDragStop,
connectionLineType,
connectionLineStyle,
selectionKeyCode,
@@ -262,7 +268,13 @@ const GraphView = ({
markerEndId={markerEndId}
/>
- {nodesSelectionActive &&
}
+ {nodesSelectionActive && (
+
+ )}
, 'on
onMoveStart?: (flowTransform?: FlowTransform) => void;
onMoveEnd?: (flowTransform?: FlowTransform) => void;
onSelectionChange?: (elements: Elements | null) => void;
+ onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
+ onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
onPaneClick?: (event: MouseEvent) => void;
onPaneContextMenu?: (event: MouseEvent) => void;
nodeTypes: NodeTypesType;
@@ -103,6 +106,9 @@ const ReactFlow = ({
onNodeDragStart,
onNodeDragStop,
onSelectionChange,
+ onSelectionDragStart,
+ onSelectionDrag,
+ onSelectionDragStop,
connectionLineType,
connectionLineStyle,
deleteKeyCode,
@@ -175,6 +181,9 @@ const ReactFlow = ({
paneMoveable={paneMoveable}
onPaneClick={onPaneClick}
onPaneContextMenu={onPaneContextMenu}
+ onSelectionDragStart={onSelectionDragStart}
+ onSelectionDrag={onSelectionDrag}
+ onSelectionDragStop={onSelectionDragStop}
/>
{onSelectionChange && }
{children}
diff --git a/src/hooks/useD3Zoom.ts b/src/hooks/useD3Zoom.ts
index e25de360..4fbbef6c 100644
--- a/src/hooks/useD3Zoom.ts
+++ b/src/hooks/useD3Zoom.ts
@@ -1,5 +1,4 @@
import { useEffect, useRef, MutableRefObject } from 'react';
-import { event } from 'd3-selection';
import { useStoreState, useStoreActions } from '../store/hooks';
import { FlowTransform } from '../types';
@@ -53,7 +52,7 @@ export default ({
if (selectionKeyPressed) {
d3Zoom.on('zoom', null);
} else {
- d3Zoom.on('zoom', () => {
+ d3Zoom.on('zoom', (event: any) => {
updateTransform(event.transform);
if (onMove) {
@@ -68,7 +67,7 @@ export default ({
useEffect(() => {
if (d3Zoom) {
if (onMoveStart) {
- d3Zoom.on('start', () => {
+ d3Zoom.on('start', (event: any) => {
if (viewChanged(prevTransform.current, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform);
prevTransform.current = flowTransform;
@@ -85,7 +84,7 @@ export default ({
useEffect(() => {
if (d3Zoom) {
if (onMoveEnd) {
- d3Zoom.on('end', () => {
+ d3Zoom.on('end', (event: any) => {
if (viewChanged(prevTransform.current, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform);
prevTransform.current = flowTransform;
@@ -101,7 +100,7 @@ export default ({
useEffect(() => {
if (d3Zoom) {
- d3Zoom.filter(() => {
+ d3Zoom.filter((event: any) => {
if (!paneMoveable) {
return false;
}
diff --git a/src/index.ts b/src/index.ts
index 9bce1399..40da9303 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,7 +8,7 @@ export { getBezierPath } from './components/Edges/BezierEdge';
export { getSmoothStepPath } from './components/Edges/SmoothStepEdge';
export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
-export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/graph';
+export { isNode, isEdge, removeElements, addEdge, getOutgoers, getConnectedEdges } from './utils/graph';
export * from './additional-components';
export * from './types';