131 lines
3.6 KiB
TypeScript
131 lines
3.6 KiB
TypeScript
import { memo, type ReactNode } from 'react';
|
|
|
|
import { useStore } from '../../hooks/useStore';
|
|
import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
|
|
import useKeyPress from '../../hooks/useKeyPress';
|
|
import { GraphViewProps } from '../GraphView';
|
|
import ZoomPane from '../ZoomPane';
|
|
import Pane from '../Pane';
|
|
import NodesSelection from '../../components/NodesSelection';
|
|
import type { ReactFlowState } from '../../types';
|
|
|
|
export type FlowRendererProps = Omit<
|
|
GraphViewProps,
|
|
| 'snapToGrid'
|
|
| 'nodeTypes'
|
|
| 'edgeTypes'
|
|
| 'snapGrid'
|
|
| 'connectionLineType'
|
|
| 'connectionLineContainerStyle'
|
|
| 'arrowHeadColor'
|
|
| 'onlyRenderVisibleElements'
|
|
| 'selectNodesOnDrag'
|
|
| 'defaultMarkerColor'
|
|
| 'rfId'
|
|
| 'nodeOrigin'
|
|
> & {
|
|
isControlledViewport: boolean;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const selector = (s: ReactFlowState) => s.nodesSelectionActive;
|
|
|
|
const FlowRenderer = ({
|
|
children,
|
|
onPaneClick,
|
|
onPaneMouseEnter,
|
|
onPaneMouseMove,
|
|
onPaneMouseLeave,
|
|
onPaneContextMenu,
|
|
onPaneScroll,
|
|
deleteKeyCode,
|
|
selectionKeyCode,
|
|
selectionOnDrag,
|
|
selectionMode,
|
|
onSelectionStart,
|
|
onSelectionEnd,
|
|
multiSelectionKeyCode,
|
|
panActivationKeyCode,
|
|
zoomActivationKeyCode,
|
|
elementsSelectable,
|
|
zoomOnScroll,
|
|
zoomOnPinch,
|
|
panOnScroll: _panOnScroll,
|
|
panOnScrollSpeed,
|
|
panOnScrollMode,
|
|
zoomOnDoubleClick,
|
|
panOnDrag: _panOnDrag,
|
|
defaultViewport,
|
|
translateExtent,
|
|
minZoom,
|
|
maxZoom,
|
|
preventScrolling,
|
|
onSelectionContextMenu,
|
|
noWheelClassName,
|
|
noPanClassName,
|
|
disableKeyboardA11y,
|
|
onViewportChange,
|
|
isControlledViewport,
|
|
}: FlowRendererProps) => {
|
|
const nodesSelectionActive = useStore(selector);
|
|
const selectionKeyPressed = useKeyPress(selectionKeyCode);
|
|
const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
|
|
|
|
const panOnDrag = panActivationKeyPressed || _panOnDrag;
|
|
const panOnScroll = panActivationKeyPressed || _panOnScroll;
|
|
const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
|
|
|
|
useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
|
|
|
|
return (
|
|
<ZoomPane
|
|
onPaneContextMenu={onPaneContextMenu}
|
|
elementsSelectable={elementsSelectable}
|
|
zoomOnScroll={zoomOnScroll}
|
|
zoomOnPinch={zoomOnPinch}
|
|
panOnScroll={panOnScroll}
|
|
panOnScrollSpeed={panOnScrollSpeed}
|
|
panOnScrollMode={panOnScrollMode}
|
|
zoomOnDoubleClick={zoomOnDoubleClick}
|
|
panOnDrag={!selectionKeyPressed && panOnDrag}
|
|
defaultViewport={defaultViewport}
|
|
translateExtent={translateExtent}
|
|
minZoom={minZoom}
|
|
maxZoom={maxZoom}
|
|
zoomActivationKeyCode={zoomActivationKeyCode}
|
|
preventScrolling={preventScrolling}
|
|
noWheelClassName={noWheelClassName}
|
|
noPanClassName={noPanClassName}
|
|
onViewportChange={onViewportChange}
|
|
isControlledViewport={isControlledViewport}
|
|
>
|
|
<Pane
|
|
onSelectionStart={onSelectionStart}
|
|
onSelectionEnd={onSelectionEnd}
|
|
onPaneClick={onPaneClick}
|
|
onPaneMouseEnter={onPaneMouseEnter}
|
|
onPaneMouseMove={onPaneMouseMove}
|
|
onPaneMouseLeave={onPaneMouseLeave}
|
|
onPaneContextMenu={onPaneContextMenu}
|
|
onPaneScroll={onPaneScroll}
|
|
panOnDrag={panOnDrag}
|
|
isSelecting={!!isSelecting}
|
|
selectionMode={selectionMode}
|
|
>
|
|
{children}
|
|
{nodesSelectionActive && (
|
|
<NodesSelection
|
|
onSelectionContextMenu={onSelectionContextMenu}
|
|
noPanClassName={noPanClassName}
|
|
disableKeyboardA11y={disableKeyboardA11y}
|
|
/>
|
|
)}
|
|
</Pane>
|
|
</ZoomPane>
|
|
);
|
|
};
|
|
|
|
FlowRenderer.displayName = 'FlowRenderer';
|
|
|
|
export default memo(FlowRenderer);
|