135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
/**
|
|
* The nodes selection rectangle gets displayed when a user
|
|
* made a selection with on or several nodes
|
|
*/
|
|
|
|
import React, { memo, useMemo, useCallback, useRef, MouseEvent } from 'react';
|
|
import { DraggableCore, DraggableData } from 'react-draggable';
|
|
import cc from 'classcat';
|
|
import shallow from 'zustand/shallow';
|
|
|
|
import { useStore } from '../../store';
|
|
import { Node, ReactFlowState } from '../../types';
|
|
import { getRectOfNodes } from '../../utils/graph';
|
|
|
|
export interface NodesSelectionProps {
|
|
onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
|
|
onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
|
|
onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
|
|
onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
|
|
noPanClassName?: string;
|
|
}
|
|
// @TODO: work with nodeInternals instead of converting it to an array
|
|
const selector = (s: ReactFlowState) => ({
|
|
transform: s.transform,
|
|
selectedNodesBbox: s.selectedNodesBbox,
|
|
userSelectionActive: s.userSelectionActive,
|
|
selectedNodes: Array.from(s.nodeInternals.values()).filter((n) => n.selected),
|
|
snapToGrid: s.snapToGrid,
|
|
snapGrid: s.snapGrid,
|
|
updateNodePosition: s.updateNodePosition,
|
|
});
|
|
|
|
function NodesSelection({
|
|
onSelectionDragStart,
|
|
onSelectionDrag,
|
|
onSelectionDragStop,
|
|
onSelectionContextMenu,
|
|
noPanClassName,
|
|
}: NodesSelectionProps) {
|
|
const { transform, userSelectionActive, selectedNodes, snapToGrid, snapGrid, updateNodePosition } = useStore(
|
|
selector,
|
|
shallow
|
|
);
|
|
const [tX, tY, tScale] = transform;
|
|
const nodeRef = useRef(null);
|
|
|
|
const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
|
|
|
|
const style = useMemo(
|
|
() => ({
|
|
transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
|
|
}),
|
|
[tX, tY, tScale]
|
|
);
|
|
|
|
const selectedNodesBbox = useMemo(() => getRectOfNodes(selectedNodes), [selectedNodes]);
|
|
|
|
const innerStyle = useMemo(
|
|
() => ({
|
|
width: selectedNodesBbox.width,
|
|
height: selectedNodesBbox.height,
|
|
top: selectedNodesBbox.y,
|
|
left: selectedNodesBbox.x,
|
|
}),
|
|
[selectedNodesBbox]
|
|
);
|
|
|
|
const onStart = useCallback(
|
|
(event: MouseEvent) => {
|
|
onSelectionDragStart?.(event, selectedNodes);
|
|
},
|
|
[onSelectionDragStart, selectedNodes]
|
|
);
|
|
|
|
const onDrag = useCallback(
|
|
(event: MouseEvent, data: DraggableData) => {
|
|
updateNodePosition({
|
|
diff: {
|
|
x: data.deltaX,
|
|
y: data.deltaY,
|
|
},
|
|
dragging: true,
|
|
});
|
|
|
|
onSelectionDrag?.(event, selectedNodes);
|
|
},
|
|
[onSelectionDrag, selectedNodes, updateNodePosition]
|
|
);
|
|
|
|
const onStop = useCallback(
|
|
(event: MouseEvent) => {
|
|
updateNodePosition({
|
|
dragging: false,
|
|
});
|
|
|
|
onSelectionDragStop?.(event, selectedNodes);
|
|
},
|
|
[selectedNodes, onSelectionDragStop]
|
|
);
|
|
|
|
const onContextMenu = useCallback(
|
|
(event: MouseEvent) => {
|
|
onSelectionContextMenu?.(event, selectedNodes);
|
|
},
|
|
[onSelectionContextMenu, selectedNodes]
|
|
);
|
|
|
|
if (!selectedNodes?.length || userSelectionActive) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
|
|
<DraggableCore
|
|
scale={tScale}
|
|
grid={grid}
|
|
onStart={(event) => onStart(event as MouseEvent)}
|
|
onDrag={(event, data) => onDrag(event as MouseEvent, data)}
|
|
onStop={(event) => onStop(event as MouseEvent)}
|
|
nodeRef={nodeRef}
|
|
enableUserSelectHack={false}
|
|
>
|
|
<div
|
|
ref={nodeRef}
|
|
className="react-flow__nodesselection-rect"
|
|
onContextMenu={onContextMenu}
|
|
style={innerStyle}
|
|
/>
|
|
</DraggableCore>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(NodesSelection);
|