35 lines
1016 B
TypeScript
35 lines
1016 B
TypeScript
import type { MouseEvent } from 'react';
|
|
import cc from 'classcat';
|
|
|
|
import { useStore } from '../../hooks/useStore';
|
|
import { containerStyle } from '../../styles';
|
|
import type { ReactFlowState } from '../../types';
|
|
import type { FlowRendererProps } from '.';
|
|
|
|
type PaneProps = Pick<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
|
|
onMouseEnter?: (event: MouseEvent) => void;
|
|
onMouseMove?: (event: MouseEvent) => void;
|
|
onMouseLeave?: (event: MouseEvent) => void;
|
|
};
|
|
|
|
const selector = (s: ReactFlowState) => s.paneDragging;
|
|
|
|
function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) {
|
|
const dragging = useStore(selector);
|
|
|
|
return (
|
|
<div
|
|
className={cc(['react-flow__pane', { dragging }])}
|
|
onClick={onClick}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseMove={onMouseMove}
|
|
onMouseLeave={onMouseLeave}
|
|
onContextMenu={onContextMenu}
|
|
onWheel={onWheel}
|
|
style={containerStyle}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default Pane;
|