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

chore(react): cleanup exports

Browse Source
This commit is contained in:
moklick
2024-01-08 13:26:14 +01:00
parent 30c975e39f
commit 61f8e00541
61 changed files with 386 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/Stress/index.tsx
-1
View File
@@ -11,7 +11,6 @@ import {
EdgeChange,
Controls,
Background,
MiniMap,
Panel,
} from '@xyflow/react';
packages/react/src/additional-components/Background/Background.tsx
+5 -5
View File
@@ -3,10 +3,10 @@ import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
import { type ReactFlowState } from '../../types';
import { BackgroundProps, BackgroundVariant } from './types';
import { DotPattern, LinePattern } from './Patterns';
import { containerStyle } from '../../styles/utils';
import { type BackgroundProps, BackgroundVariant } from './types';
import { type ReactFlowState } from '../../types';
const defaultSize = {
[BackgroundVariant.Dots]: 1,
@@ -16,7 +16,7 @@ const defaultSize = {
const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
function Background({
function BackgroundComponent({
id,
variant = BackgroundVariant.Dots,
// only used for dots and cross
@@ -87,6 +87,6 @@ function Background({
);
}
Background.displayName = 'Background';
BackgroundComponent.displayName = 'Background';
export default memo(Background);
export const Background = memo(BackgroundComponent);
packages/react/src/additional-components/Background/index.tsx
+2 -2
View File
@@ -1,2 +1,2 @@
export { default as Background } from './Background';
export * from './types';
export { Background } from './Background';
export { BackgroundVariant, type BackgroundProps } from './types';
packages/react/src/additional-components/Controls/ControlButton.tsx
+7 -10
View File
@@ -1,14 +1,11 @@
import type { FC, PropsWithChildren } from 'react';
import cc from 'classcat';
import type { ControlButtonProps } from './types';
const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
{children}
</button>
);
ControlButton.displayName = 'ControlButton';
export default ControlButton;
export function ControlButton({ children, className, ...rest }: ControlButtonProps) {
return (
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
{children}
</button>
);
}
packages/react/src/additional-components/Controls/Controls.tsx
+14 -15
View File
@@ -1,19 +1,18 @@
import { memo, type FC, type PropsWithChildren } from 'react';
import { memo } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { useStore, useStoreApi } from '../../hooks/useStore';
import { useReactFlow } from '../../hooks/useReactFlow';
import Panel from '../../components/Panel';
import { Panel } from '../../components/Panel';
import { type ReactFlowState } from '../../types';
import PlusIcon from './Icons/Plus';
import MinusIcon from './Icons/Minus';
import FitviewIcon from './Icons/FitView';
import LockIcon from './Icons/Lock';
import UnlockIcon from './Icons/Unlock';
import ControlButton from './ControlButton';
import { PlusIcon } from './Icons/Plus';
import { MinusIcon } from './Icons/Minus';
import { FitViewIcon } from './Icons/FitView';
import { LockIcon } from './Icons/Lock';
import { UnlockIcon } from './Icons/Unlock';
import { ControlButton } from './ControlButton';
import type { ControlProps } from './types';
const selector = (s: ReactFlowState) => ({
@@ -22,7 +21,7 @@ const selector = (s: ReactFlowState) => ({
maxZoomReached: s.transform[2] >= s.maxZoom,
});
const Controls: FC<PropsWithChildren<ControlProps>> = ({
function ControlsComponent({
style,
showZoom = true,
showFitView = true,
@@ -35,7 +34,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
className,
children,
position = 'bottom-left',
}) => {
}: ControlProps) {
const store = useStoreApi();
const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -101,7 +100,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
title="fit view"
aria-label="fit view"
>
<FitviewIcon />
<FitViewIcon />
</ControlButton>
)}
{showInteractive && (
@@ -117,8 +116,8 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
{children}
</Panel>
);
};
}
Controls.displayName = 'Controls';
ControlsComponent.displayName = 'Controls';
export default memo(Controls);
export const Controls = memo(ControlsComponent);
packages/react/src/additional-components/Controls/Icons/FitView.tsx
+1 -3
View File
@@ -1,9 +1,7 @@
function FitViewIcon() {
export function FitViewIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
<path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
</svg>
);
}
export default FitViewIcon;
packages/react/src/additional-components/Controls/Icons/Lock.tsx
+1 -3
View File
@@ -1,9 +1,7 @@
function LockIcon() {
export function LockIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
</svg>
);
}
export default LockIcon;
packages/react/src/additional-components/Controls/Icons/Minus.tsx
+1 -3
View File
@@ -1,9 +1,7 @@
function MinusIcon() {
export function MinusIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
<path d="M0 0h32v4.2H0z" />
</svg>
);
}
export default MinusIcon;
packages/react/src/additional-components/Controls/Icons/Plus.tsx
+1 -3
View File
@@ -1,9 +1,7 @@
function PlusIcon() {
export function PlusIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
</svg>
);
}
export default PlusIcon;
packages/react/src/additional-components/Controls/Icons/Unlock.tsx
+1 -3
View File
@@ -1,9 +1,7 @@
function UnlockIcon() {
export function UnlockIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
</svg>
);
}
export default UnlockIcon;
packages/react/src/additional-components/Controls/index.tsx
+3 -3
View File
@@ -1,3 +1,3 @@
export { default as Controls } from './Controls';
export { default as ControlButton } from './ControlButton';
export * from './types';
export { Controls } from './Controls';
export { ControlButton } from './ControlButton';
export type { ControlProps, ControlButtonProps } from './types';
packages/react/src/additional-components/Controls/types.ts
+2 -1
View File
@@ -1,4 +1,4 @@
import type { ButtonHTMLAttributes, HTMLAttributes } from 'react';
import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
import type { PanelPosition } from '@xyflow/system';
import type { FitViewOptions } from '../../types';
@@ -13,6 +13,7 @@ export type ControlProps = HTMLAttributes<HTMLDivElement> & {
onFitView?: () => void;
onInteractiveChange?: (interactiveStatus: boolean) => void;
position?: PanelPosition;
children?: ReactNode;
};
export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
packages/react/src/additional-components/MiniMap/MiniMap.tsx
+5 -5
View File
@@ -6,11 +6,11 @@ import { shallow } from 'zustand/shallow';
import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
import { useStore, useStoreApi } from '../../hooks/useStore';
import Panel from '../../components/Panel';
import { Panel } from '../../components/Panel';
import type { ReactFlowState } from '../../types';
import type { MiniMapProps } from './types';
import MiniMapNodes from './MiniMapNodes';
import type { MiniMapProps } from './types';
const defaultWidth = 200;
const defaultHeight = 150;
@@ -37,7 +37,7 @@ const selector = (s: ReactFlowState) => {
const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
function MiniMap({
function MiniMapComponent({
style,
className,
nodeStrokeColor,
@@ -171,6 +171,6 @@ function MiniMap({
);
}
MiniMap.displayName = 'MiniMap';
MiniMapComponent.displayName = 'MiniMap';
export default memo(MiniMap);
export const MiniMap = memo(MiniMapComponent);
packages/react/src/additional-components/MiniMap/MiniMapNode.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import cc from 'classcat';
import type { MiniMapNodeProps } from './types';
function MiniMapNode({
function MiniMapNodeComponent({
id,
x,
y,
@@ -42,4 +42,4 @@ function MiniMapNode({
);
}
export default memo(MiniMapNode);
export const MiniMapNode = memo(MiniMapNodeComponent);
packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+1 -1
View File
@@ -5,8 +5,8 @@ import { NodeOrigin, getNodePositionWithOrigin } from '@xyflow/system';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
import { MiniMapNode } from './MiniMapNode';
import type { ReactFlowState } from '../../types';
import MiniMapNode from './MiniMapNode';
import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
declare const window: any;
packages/react/src/additional-components/MiniMap/index.tsx
+1 -1
View File
@@ -1,2 +1,2 @@
export { default as MiniMap } from './MiniMap';
export { MiniMap } from './MiniMap';
export * from './types';
packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+3 -5
View File
@@ -6,8 +6,8 @@ import { getNodesBounds, Rect, Position, internalsSymbol, getNodeToolbarTransfor
import { Node, ReactFlowState } from '../../types';
import { useStore } from '../../hooks/useStore';
import { useNodeId } from '../../contexts/NodeIdContext';
import NodeToolbarPortal from './NodeToolbarPortal';
import { NodeToolbarProps } from './types';
import { NodeToolbarPortal } from './NodeToolbarPortal';
import type { NodeToolbarProps } from './types';
const nodeEqualityFn = (a?: Node, b?: Node) =>
a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
@@ -35,7 +35,7 @@ const storeSelector = (state: ReactFlowState) => ({
selectedNodesCount: state.nodes.filter((node) => node.selected).length,
});
function NodeToolbar({
export function NodeToolbar({
nodeId,
children,
className,
@@ -96,5 +96,3 @@ function NodeToolbar({
</NodeToolbarPortal>
);
}
export default NodeToolbar;
packages/react/src/additional-components/NodeToolbar/NodeToolbarPortal.tsx
+1 -3
View File
@@ -6,7 +6,7 @@ import { useStore } from '../../hooks/useStore';
const selector = (state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer');
function NodeToolbarPortal({ children }: { children: ReactNode }) {
export function NodeToolbarPortal({ children }: { children: ReactNode }) {
const wrapperRef = useStore(selector);
if (!wrapperRef) {
@@ -15,5 +15,3 @@ function NodeToolbarPortal({ children }: { children: ReactNode }) {
return createPortal(children, wrapperRef);
}
export default NodeToolbarPortal;
packages/react/src/additional-components/NodeToolbar/index.tsx
+2 -2
View File
@@ -1,2 +1,2 @@
export { default as NodeToolbar } from './NodeToolbar';
export * from './types';
export { NodeToolbar } from './NodeToolbar';
export type { NodeToolbarProps } from './types';
packages/react/src/components/A11yDescriptions/index.tsx
+1 -3
View File
@@ -32,7 +32,7 @@ function AriaLiveMessage({ rfId }: { rfId: string }) {
);
}
function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
export function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
return (
<>
<div id={`${ARIA_NODE_DESC_KEY}-${rfId}`} style={style}>
@@ -47,5 +47,3 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disable
</>
);
}
export default A11yDescriptions;
packages/react/src/components/Attribution/index.tsx
+2 -4
View File
@@ -1,13 +1,13 @@
import type { PanelPosition, ProOptions } from '@xyflow/system';
import Panel from '../Panel';
import { Panel } from '../Panel';
type AttributionProps = {
proOptions?: ProOptions;
position?: PanelPosition;
};
function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
export function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
if (proOptions?.hideAttribution) {
return null;
}
@@ -24,5 +24,3 @@ function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps
</Panel>
);
}
export default Attribution;
packages/react/src/components/ConnectionLine/index.tsx
+1 -3
View File
@@ -142,7 +142,7 @@ const selector = (s: ReactFlowState) => ({
height: s.height,
});
function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector, shallow);
const isValid = !!(nodeId && handleType && width && nodesConnectable);
@@ -170,5 +170,3 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }: Conne
</svg>
);
}
export default ConnectionLineWrapper;
packages/react/src/components/EdgeLabelRenderer/index.tsx
+1 -3
View File
@@ -6,7 +6,7 @@ import type { ReactFlowState } from '../../types';
const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
function EdgeLabelRenderer({ children }: { children: ReactNode }) {
export function EdgeLabelRenderer({ children }: { children: ReactNode }) {
const edgeLabelRenderer = useStore(selector);
if (!edgeLabelRenderer) {
@@ -15,5 +15,3 @@ function EdgeLabelRenderer({ children }: { children: ReactNode }) {
return createPortal(children, edgeLabelRenderer);
}
export default EdgeLabelRenderer;
packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx
+1 -3
View File
@@ -18,7 +18,7 @@ type EdgeUpdateAnchorsProps = {
setUpdating: (updating: boolean) => void;
} & EdgePosition;
function EdgeUpdateAnchors({
export function EdgeUpdateAnchors({
isUpdatable,
edgeUpdaterRadius,
edge,
@@ -133,5 +133,3 @@ function EdgeUpdateAnchors({
</>
);
}
export default EdgeUpdateAnchors;
packages/react/src/components/EdgeWrapper/index.tsx
+4 -8
View File
@@ -1,4 +1,4 @@
import { memo, useState, useMemo, useRef, type KeyboardEvent, useCallback } from 'react';
import { useState, useMemo, useRef, type KeyboardEvent, useCallback } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import {
@@ -11,11 +11,11 @@ import {
import { useStoreApi, useStore } from '../../hooks/useStore';
import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
import type { EdgeWrapperProps } from '../../types';
import { builtinEdgeTypes, nullPosition } from './utils';
import EdgeUpdateAnchors from './EdgeUpdateAnchors';
import { EdgeUpdateAnchors } from './EdgeUpdateAnchors';
import type { EdgeWrapperProps } from '../../types';
function EdgeWrapper({
export function EdgeWrapper({
id,
edgesFocusable,
edgesUpdatable,
@@ -258,7 +258,3 @@ function EdgeWrapper({
</svg>
);
}
EdgeWrapper.displayName = 'EdgeWrapper';
export default memo(EdgeWrapper);
packages/react/src/components/Edges/BaseEdge.tsx
+6 -10
View File
@@ -1,10 +1,10 @@
import { isNumeric } from '@xyflow/system';
import cc from 'classcat';
import { EdgeText } from './EdgeText';
import type { BaseEdgeProps } from '../../types';
import EdgeText from './EdgeText';
import classcat from 'classcat';
const BaseEdge = ({
export function BaseEdge({
id,
path,
labelX,
@@ -20,7 +20,7 @@ const BaseEdge = ({
markerStart,
className,
interactionWidth = 20,
}: BaseEdgeProps) => {
}: BaseEdgeProps) {
return (
<>
<path
@@ -28,7 +28,7 @@ const BaseEdge = ({
style={style}
d={path}
fill="none"
className={classcat(['react-flow__edge-path', className])}
className={cc(['react-flow__edge-path', className])}
markerEnd={markerEnd}
markerStart={markerStart}
/>
@@ -55,8 +55,4 @@ const BaseEdge = ({
) : null}
</>
);
};
BaseEdge.displayName = 'BaseEdge';
export default BaseEdge;
}
packages/react/src/components/Edges/BezierEdge.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { memo } from 'react';
import { Position, getBezierPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import { BaseEdge } from './BaseEdge';
import type { BezierEdgeProps } from '../../types';
function createBezierEdge(params: { isInternal: boolean }) {
packages/react/src/components/Edges/EdgeAnchor.tsx
+17 -15
View File
@@ -1,4 +1,4 @@
import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
import type { MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
import cc from 'classcat';
import { Position } from '@xyflow/system';
@@ -27,7 +27,7 @@ export interface EdgeAnchorProps extends SVGAttributes<SVGGElement> {
const EdgeUpdaterClassName = 'react-flow__edgeupdater';
export const EdgeAnchor: FC<EdgeAnchorProps> = ({
export function EdgeAnchor({
position,
centerX,
centerY,
@@ -36,16 +36,18 @@ export const EdgeAnchor: FC<EdgeAnchorProps> = ({
onMouseEnter,
onMouseOut,
type,
}: EdgeAnchorProps) => (
<circle
onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
onMouseOut={onMouseOut}
className={cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`])}
cx={shiftX(centerX, radius, position)}
cy={shiftY(centerY, radius, position)}
r={radius}
stroke="transparent"
fill="transparent"
/>
);
}: EdgeAnchorProps) {
return (
<circle
onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
onMouseOut={onMouseOut}
className={cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`])}
cx={shiftX(centerX, radius, position)}
cy={shiftY(centerY, radius, position)}
r={radius}
stroke="transparent"
fill="transparent"
/>
);
}
packages/react/src/components/Edges/EdgeText.tsx
+6 -5
View File
@@ -1,10 +1,10 @@
import { memo, useState, type FC, type PropsWithChildren, useCallback } from 'react';
import { memo, useState, useCallback } from 'react';
import cc from 'classcat';
import type { Rect } from '@xyflow/system';
import type { EdgeTextProps } from '../../types';
const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
function EdgeTextComponent({
x,
y,
label,
@@ -16,7 +16,7 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
children,
className,
...rest
}) => {
}: EdgeTextProps) {
const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 1, y: 0, width: 0, height: 0 });
const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
@@ -68,5 +68,6 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
{children}
</g>
);
};
export default memo(EdgeText);
}
export const EdgeText = memo(EdgeTextComponent);
packages/react/src/components/Edges/SimpleBezierEdge.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { memo } from 'react';
import { Position, getBezierEdgeCenter } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import { BaseEdge } from './BaseEdge';
import type { SimpleBezierEdgeProps } from '../../types';
export interface GetSimpleBezierPathParams {
packages/react/src/components/Edges/SmoothStepEdge.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { memo } from 'react';
import { Position, getSmoothStepPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import { BaseEdge } from './BaseEdge';
import type { SmoothStepEdgeProps } from '../../types';
function createSmoothStepEdge(params: { isInternal: boolean }) {
packages/react/src/components/Edges/StraightEdge.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { memo } from 'react';
import { getStraightPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import { BaseEdge } from './BaseEdge';
import type { StraightEdgeProps } from '../../types';
function createStraightEdge(params: { isInternal: boolean }) {
packages/react/src/components/Handle/index.tsx
+3 -3
View File
@@ -47,7 +47,7 @@ const connectingSelector =
};
};
const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
(
{
type = 'source',
@@ -216,6 +216,6 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
}
);
Handle.displayName = 'Handle';
HandleComponent.displayName = 'Handle';
export default memo(Handle);
export const Handle = memo(HandleComponent);
packages/react/src/components/NodeWrapper/index.tsx
+4 -8
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, memo, type MouseEvent, type KeyboardEvent } from 'react';
import { useEffect, useRef, type MouseEvent, type KeyboardEvent } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import {
@@ -19,7 +19,7 @@ import { handleNodeClick } from '../Nodes/utils';
import { arrowKeyDiffs, builtinNodeTypes } from './utils';
import type { NodeWrapperProps } from '../../types';
const NodeWrapper = ({
export function NodeWrapper({
id,
onClick,
onMouseEnter,
@@ -40,7 +40,7 @@ const NodeWrapper = ({
nodeExtent,
nodeOrigin,
onError,
}: NodeWrapperProps) => {
}: NodeWrapperProps) {
const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
const node = s.nodeLookup.get(id)!;
@@ -257,8 +257,4 @@ const NodeWrapper = ({
</Provider>
</div>
);
};
NodeWrapper.displayName = 'NodeWrapper';
export default memo(NodeWrapper);
}
packages/react/src/components/NodeWrapper/utils.tsx
+4 -4
View File
@@ -1,10 +1,10 @@
import type { ComponentType } from 'react';
import type { NodeProps, XYPosition } from '@xyflow/system';
import InputNode from '../Nodes/InputNode';
import DefaultNode from '../Nodes/DefaultNode';
import GroupNode from '../Nodes/GroupNode';
import OutputNode from '../Nodes/OutputNode';
import { InputNode } from '../Nodes/InputNode';
import { DefaultNode } from '../Nodes/DefaultNode';
import { GroupNode } from '../Nodes/GroupNode';
import { OutputNode } from '../Nodes/OutputNode';
import type { NodeTypes } from '../../types';
export const arrowKeyDiffs: Record<string, XYPosition> = {
packages/react/src/components/Nodes/DefaultNode.tsx
+4 -9
View File
@@ -1,14 +1,13 @@
import { memo } from 'react';
import { Position, type NodeProps } from '@xyflow/system';
import Handle from '../../components/Handle';
import { Handle } from '../../components/Handle';
const DefaultNode = ({
export function DefaultNode({
data,
isConnectable,
targetPosition = Position.Top,
sourcePosition = Position.Bottom,
}: NodeProps) => {
}: NodeProps) {
return (
<>
<Handle type="target" position={targetPosition} isConnectable={isConnectable} />
@@ -16,8 +15,4 @@ const DefaultNode = ({
<Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
</>
);
};
DefaultNode.displayName = 'DefaultNode';
export default memo(DefaultNode);
}
packages/react/src/components/Nodes/GroupNode.tsx
+3 -5
View File
@@ -1,5 +1,3 @@
const GroupNode = () => null;
GroupNode.displayName = 'GroupNode';
export default GroupNode;
export function GroupNode() {
return null;
}
packages/react/src/components/Nodes/InputNode.tsx
+9 -12
View File
@@ -1,15 +1,12 @@
import { memo } from 'react';
import { Position, type NodeProps } from '@xyflow/system';
import Handle from '../../components/Handle';
import { Handle } from '../../components/Handle';
const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
<>
{data?.label}
<Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
</>
);
InputNode.displayName = 'InputNode';
export default memo(InputNode);
export function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) {
return (
<>
{data?.label}
<Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
</>
);
}
packages/react/src/components/Nodes/OutputNode.tsx
+9 -12
View File
@@ -1,15 +1,12 @@
import { memo } from 'react';
import { Position, type NodeProps } from '@xyflow/system';
import Handle from '../../components/Handle';
import { Handle } from '../../components/Handle';
const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
<>
<Handle type="target" position={targetPosition} isConnectable={isConnectable} />
{data?.label}
</>
);
OutputNode.displayName = 'OutputNode';
export default memo(OutputNode);
export function OutputNode({ data, isConnectable, targetPosition = Position.Top }: NodeProps) {
return (
<>
<Handle type="target" position={targetPosition} isConnectable={isConnectable} />
{data?.label}
</>
);
}
packages/react/src/components/Nodes/utils.ts
+1 -1
View File
@@ -1,8 +1,8 @@
import type { RefObject } from 'react';
import type { StoreApi } from 'zustand';
import { errorMessages } from '@xyflow/system';
import type { ReactFlowState } from '../../types';
import { errorMessages } from '@xyflow/system';
// this handler is called by
// 1. the click handler when node is not draggable or selectNodesOnDrag = false
packages/react/src/components/NodesSelection/index.tsx
+2 -4
View File
@@ -3,7 +3,7 @@
* made a selection with on or several nodes
*/
import { memo, useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
import { useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { getNodesBounds } from '@xyflow/system';
@@ -32,7 +32,7 @@ const selector = (s: ReactFlowState) => {
};
};
function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
export function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
const store = useStoreApi();
const { width, height, transformString, userSelectionActive } = useStore(selector, shallow);
const updatePositions = useUpdateNodePositions();
@@ -93,5 +93,3 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
</div>
);
}
export default memo(NodesSelection);
packages/react/src/components/Panel/index.tsx
+2 -4
View File
@@ -6,13 +6,13 @@ import { useStore } from '../../hooks/useStore';
import type { ReactFlowState } from '../../types';
export type PanelProps = HTMLAttributes<HTMLDivElement> & {
position: PanelPosition;
position?: PanelPosition;
children: ReactNode;
};
const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
function Panel({ position, children, className, style, ...rest }: PanelProps) {
export function Panel({ position = 'top-left', children, className, style, ...rest }: PanelProps) {
const pointerEvents = useStore(selector);
const positionClasses = `${position}`.split('-');
@@ -26,5 +26,3 @@ function Panel({ position, children, className, style, ...rest }: PanelProps) {
</div>
);
}
export default Panel;
packages/react/src/components/ReactFlowProvider/index.tsx
+1 -5
View File
@@ -6,7 +6,7 @@ import { Provider } from '../../contexts/RFStoreContext';
import { createRFStore } from '../../store';
import type { ReactFlowState, Node, Edge } from '../../types';
function ReactFlowProvider({
export function ReactFlowProvider({
children,
initialNodes,
initialEdges,
@@ -35,7 +35,3 @@ function ReactFlowProvider({
return <Provider value={storeRef.current}>{children}</Provider>;
}
ReactFlowProvider.displayName = 'ReactFlowProvider';
export default ReactFlowProvider;
packages/react/src/components/SelectionListener/index.tsx
+5 -9
View File
@@ -4,7 +4,7 @@
* or is using the useOnSelectionChange hook.
* @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component?
*/
import { memo, useEffect } from 'react';
import { useEffect } from 'react';
import { shallow } from 'zustand/shallow';
import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -30,7 +30,7 @@ function areEqual(a: SelectorSlice, b: SelectorSlice) {
);
}
const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) => {
function SelectionListenerInner({ onSelectionChange }: SelectionListenerProps) {
const store = useStoreApi();
const { selectedNodes, selectedEdges } = useStore(selector, areEqual);
@@ -42,20 +42,16 @@ const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) =
}, [selectedNodes, selectedEdges, onSelectionChange]);
return null;
});
SelectionListener.displayName = 'SelectionListener';
}
const changeSelector = (s: ReactFlowState) => !!s.onSelectionChangeHandlers;
function Wrapper({ onSelectionChange }: SelectionListenerProps) {
export function SelectionListener({ onSelectionChange }: SelectionListenerProps) {
const storeHasSelectionChangeHandlers = useStore(changeSelector);
if (onSelectionChange || storeHasSelectionChangeHandlers) {
return <SelectionListener onSelectionChange={onSelectionChange} />;
return <SelectionListenerInner onSelectionChange={onSelectionChange} />;
}
return null;
}
export default Wrapper;
packages/react/src/components/StoreUpdater/index.tsx
+2 -4
View File
@@ -84,7 +84,7 @@ const selector = (s: ReactFlowState) => ({
reset: s.reset,
});
const StoreUpdater = (props: StoreUpdaterProps) => {
export function StoreUpdater(props: StoreUpdaterProps) {
const {
setNodes,
setEdges,
@@ -149,6 +149,4 @@ const StoreUpdater = (props: StoreUpdaterProps) => {
);
return null;
};
export default StoreUpdater;
}
packages/react/src/components/UserSelection/index.tsx
+1 -3
View File
@@ -8,7 +8,7 @@ const selector = (s: ReactFlowState) => ({
userSelectionRect: s.userSelectionRect,
});
function UserSelection() {
export function UserSelection() {
const { userSelectionActive, userSelectionRect } = useStore(selector, shallow);
const isActive = userSelectionActive && userSelectionRect;
@@ -27,5 +27,3 @@ function UserSelection() {
/>
);
}
export default UserSelection;
packages/react/src/components/ViewportPortal/index.tsx
+1 -3
View File
@@ -6,7 +6,7 @@ import type { ReactFlowState } from '../../types';
const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__viewport-portal');
function ViewportPortal({ children }: { children: ReactNode }) {
export function ViewportPortal({ children }: { children: ReactNode }) {
const viewPortalDiv = useStore(selector);
if (!viewPortalDiv) {
@@ -15,5 +15,3 @@ function ViewportPortal({ children }: { children: ReactNode }) {
return createPortal(children, viewPortalDiv);
}
export default ViewportPortal;
packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
-2
View File
@@ -57,5 +57,3 @@ export function useMarkerSymbol(type: MarkerType) {
return symbol;
}
export default MarkerSymbols;
packages/react/src/container/EdgeRenderer/index.tsx
+7 -9
View File
@@ -2,10 +2,10 @@ import { memo, ReactNode } from 'react';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
import useVisibleEdgeIds from '../../hooks/useVisibleEdgeIds';
import { useVisibleEdgeIds } from '../../hooks/useVisibleEdgeIds';
import MarkerDefinitions from './MarkerDefinitions';
import { GraphViewProps } from '../GraphView';
import EdgeWrapper from '../../components/EdgeWrapper';
import { EdgeWrapper } from '../../components/EdgeWrapper';
import type { ReactFlowState } from '../../types';
type EdgeRendererProps = Pick<
@@ -40,7 +40,7 @@ const selector = (s: ReactFlowState) => ({
onError: s.onError,
});
const EdgeRenderer = ({
function EdgeRendererComponent({
defaultMarkerColor,
onlyRenderVisibleElements,
rfId,
@@ -56,8 +56,7 @@ const EdgeRenderer = ({
onEdgeDoubleClick,
onEdgeUpdateStart,
onEdgeUpdateEnd,
children,
}: EdgeRendererProps) => {
}: EdgeRendererProps) {
const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
@@ -90,11 +89,10 @@ const EdgeRenderer = ({
/>
);
})}
{children}
</div>
);
};
}
EdgeRenderer.displayName = 'EdgeRenderer';
EdgeRendererComponent.displayName = 'EdgeRenderer';
export default memo(EdgeRenderer);
export const EdgeRenderer = memo(EdgeRendererComponent);
packages/react/src/container/FlowRenderer/index.tsx
+6 -6
View File
@@ -4,9 +4,9 @@ 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 { ZoomPane } from '../ZoomPane';
import { Pane } from '../Pane';
import { NodesSelection } from '../../components/NodesSelection';
import type { ReactFlowState } from '../../types';
export type FlowRendererProps = Omit<
@@ -30,7 +30,7 @@ export type FlowRendererProps = Omit<
const selector = (s: ReactFlowState) => s.nodesSelectionActive;
const FlowRenderer = ({
const FlowRendererComponent = ({
children,
onPaneClick,
onPaneMouseEnter,
@@ -125,6 +125,6 @@ const FlowRenderer = ({
);
};
FlowRenderer.displayName = 'FlowRenderer';
FlowRendererComponent.displayName = 'FlowRenderer';
export default memo(FlowRenderer);
export const FlowRenderer = memo(FlowRendererComponent);
packages/react/src/container/GraphView/index.tsx
+14 -14
View File
@@ -1,14 +1,14 @@
import { memo } from 'react';
import FlowRenderer from '../FlowRenderer';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import ViewportWrapper from '../Viewport';
import { FlowRenderer } from '../FlowRenderer';
import { NodeRenderer } from '../NodeRenderer';
import { EdgeRenderer } from '../EdgeRenderer';
import { Viewport } from '../Viewport';
import { useOnInitHandler } from '../../hooks/useOnInitHandler';
import { useViewportSync } from '../../hooks/useViewportSync';
import ConnectionLine from '../../components/ConnectionLine';
import type { ReactFlowProps } from '../../types';
import { ConnectionLineWrapper } from '../../components/ConnectionLine';
import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
import type { ReactFlowProps } from '../../types';
export type GraphViewProps = Omit<
ReactFlowProps,
@@ -38,7 +38,7 @@ export type GraphViewProps = Omit<
rfId: string;
};
const GraphView = ({
function GraphViewComponent({
nodeTypes,
edgeTypes,
onInit,
@@ -102,7 +102,7 @@ const GraphView = ({
rfId,
viewport,
onViewportChange,
}: GraphViewProps) => {
}: GraphViewProps) {
useNodeOrEdgeTypesWarning(nodeTypes);
useNodeOrEdgeTypesWarning(edgeTypes);
@@ -147,7 +147,7 @@ const GraphView = ({
onViewportChange={onViewportChange}
isControlledViewport={!!viewport}
>
<ViewportWrapper>
<Viewport>
<EdgeRenderer
edgeTypes={edgeTypes}
onEdgeClick={onEdgeClick}
@@ -166,7 +166,7 @@ const GraphView = ({
disableKeyboardA11y={disableKeyboardA11y}
rfId={rfId}
/>
<ConnectionLine
<ConnectionLineWrapper
style={connectionLineStyle}
type={connectionLineType}
component={connectionLineComponent}
@@ -190,11 +190,11 @@ const GraphView = ({
nodeExtent={nodeExtent}
rfId={rfId}
/>
</ViewportWrapper>
</Viewport>
</FlowRenderer>
);
};
}
GraphView.displayName = 'GraphView';
GraphViewComponent.displayName = 'GraphView';
export default memo(GraphView);
export const GraphView = memo(GraphViewComponent);
packages/react/src/container/NodeRenderer/index.tsx
+7 -7
View File
@@ -1,13 +1,13 @@
import { memo } from 'react';
import { shallow } from 'zustand/shallow';
import useVisibleNodesIds from '../../hooks/useVisibleNodeIds';
import { useVisibleNodeIds } from '../../hooks/useVisibleNodeIds';
import { useStore } from '../../hooks/useStore';
import { containerStyle } from '../../styles/utils';
import { GraphViewProps } from '../GraphView';
import { useResizeObserver } from './useResizeObserver';
import { NodeWrapper } from '../../components/NodeWrapper';
import type { ReactFlowState } from '../../types';
import useResizeObserver from './useResizeObserver';
import NodeWrapper from '../../components/NodeWrapper';
export type NodeRendererProps = Pick<
GraphViewProps,
@@ -35,9 +35,9 @@ const selector = (s: ReactFlowState) => ({
onError: s.onError,
});
const NodeRenderer = (props: NodeRendererProps) => {
const NodeRendererComponent = (props: NodeRendererProps) => {
const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
const nodeIds = useVisibleNodesIds(props.onlyRenderVisibleElements);
const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
const resizeObserver = useResizeObserver();
return (
@@ -96,6 +96,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
);
};
NodeRenderer.displayName = 'NodeRenderer';
NodeRendererComponent.displayName = 'NodeRenderer';
export default memo(NodeRenderer);
export const NodeRenderer = memo(NodeRendererComponent);
packages/react/src/container/NodeRenderer/useResizeObserver.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import { useStore } from '../../hooks/useStore';
const selector = (s: ReactFlowState) => s.updateNodeDimensions;
export default function useResizeObserver() {
export function useResizeObserver() {
const updateNodeDimensions = useStore(selector);
const resizeObserverRef = useRef<ResizeObserver>();
packages/react/src/container/Pane/index.tsx
+182 -188
View File
@@ -2,12 +2,12 @@
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
*/
import { memo, useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
import { useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
import { shallow } from 'zustand/shallow';
import cc from 'classcat';
import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system';
import UserSelection from '../../components/UserSelection';
import { UserSelection } from '../../components/UserSelection';
import { containerStyle } from '../../styles/utils';
import { useStore, useStoreApi } from '../../hooks/useStore';
import { getSelectionChanges } from '../../utils';
@@ -50,196 +50,190 @@ const selector = (s: ReactFlowState) => ({
dragging: s.paneDragging,
});
const Pane = memo(
({
isSelecting,
selectionMode = SelectionMode.Full,
panOnDrag,
onSelectionStart,
onSelectionEnd,
onPaneClick,
onPaneContextMenu,
onPaneScroll,
onPaneMouseEnter,
onPaneMouseMove,
onPaneMouseLeave,
children,
}: PaneProps) => {
const container = useRef<HTMLDivElement | null>(null);
const store = useStoreApi();
const prevSelectedNodesCount = useRef<number>(0);
const prevSelectedEdgesCount = useRef<number>(0);
const containerBounds = useRef<DOMRect>();
const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
export function Pane({
isSelecting,
selectionMode = SelectionMode.Full,
panOnDrag,
onSelectionStart,
onSelectionEnd,
onPaneClick,
onPaneContextMenu,
onPaneScroll,
onPaneMouseEnter,
onPaneMouseMove,
onPaneMouseLeave,
children,
}: PaneProps) {
const container = useRef<HTMLDivElement | null>(null);
const store = useStoreApi();
const prevSelectedNodesCount = useRef<number>(0);
const prevSelectedEdgesCount = useRef<number>(0);
const containerBounds = useRef<DOMRect>();
const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
const resetUserSelection = () => {
store.setState({ userSelectionActive: false, userSelectionRect: null });
const resetUserSelection = () => {
store.setState({ userSelectionActive: false, userSelectionRect: null });
prevSelectedNodesCount.current = 0;
prevSelectedEdgesCount.current = 0;
prevSelectedNodesCount.current = 0;
prevSelectedEdgesCount.current = 0;
};
const onClick = (event: ReactMouseEvent) => {
onPaneClick?.(event);
store.getState().resetSelectedElements();
store.setState({ nodesSelectionActive: false });
};
const onContextMenu = (event: ReactMouseEvent) => {
if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
event.preventDefault();
return;
}
onPaneContextMenu?.(event);
};
const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
const onMouseDown = (event: ReactMouseEvent): void => {
const { resetSelectedElements, domNode } = store.getState();
containerBounds.current = domNode?.getBoundingClientRect();
if (
!elementsSelectable ||
!isSelecting ||
event.button !== 0 ||
event.target !== container.current ||
!containerBounds.current
) {
return;
}
const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
resetSelectedElements();
store.setState({
userSelectionRect: {
width: 0,
height: 0,
startX: x,
startY: y,
x,
y,
},
});
onSelectionStart?.(event);
};
const onMouseMove = (event: ReactMouseEvent): void => {
const { userSelectionRect, edges, transform, nodeOrigin, nodes, onNodesChange, onEdgesChange } = store.getState();
if (!isSelecting || !containerBounds.current || !userSelectionRect) {
return;
}
store.setState({ userSelectionActive: true, nodesSelectionActive: false });
const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
const startX = userSelectionRect.startX ?? 0;
const startY = userSelectionRect.startY ?? 0;
const nextUserSelectRect = {
...userSelectionRect,
x: mousePos.x < startX ? mousePos.x : startX,
y: mousePos.y < startY ? mousePos.y : startY,
width: Math.abs(mousePos.x - startX),
height: Math.abs(mousePos.y - startY),
};
const onClick = (event: ReactMouseEvent) => {
onPaneClick?.(event);
store.getState().resetSelectedElements();
store.setState({ nodesSelectionActive: false });
};
const onContextMenu = (event: ReactMouseEvent) => {
if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
event.preventDefault();
return;
}
onPaneContextMenu?.(event);
};
const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
const onMouseDown = (event: ReactMouseEvent): void => {
const { resetSelectedElements, domNode } = store.getState();
containerBounds.current = domNode?.getBoundingClientRect();
if (
!elementsSelectable ||
!isSelecting ||
event.button !== 0 ||
event.target !== container.current ||
!containerBounds.current
) {
return;
}
const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
resetSelectedElements();
store.setState({
userSelectionRect: {
width: 0,
height: 0,
startX: x,
startY: y,
x,
y,
},
});
onSelectionStart?.(event);
};
const onMouseMove = (event: ReactMouseEvent): void => {
const { userSelectionRect, edges, transform, nodeOrigin, nodes, onNodesChange, onEdgesChange } = store.getState();
if (!isSelecting || !containerBounds.current || !userSelectionRect) {
return;
}
store.setState({ userSelectionActive: true, nodesSelectionActive: false });
const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
const startX = userSelectionRect.startX ?? 0;
const startY = userSelectionRect.startY ?? 0;
const nextUserSelectRect = {
...userSelectionRect,
x: mousePos.x < startX ? mousePos.x : startX,
y: mousePos.y < startY ? mousePos.y : startY,
width: Math.abs(mousePos.x - startX),
height: Math.abs(mousePos.y - startY),
};
const selectedNodes = getNodesInside(
nodes,
nextUserSelectRect,
transform,
selectionMode === SelectionMode.Partial,
true,
nodeOrigin
);
const selectedEdgeIds = new Set<string>();
const selectedNodeIds = new Set<string>();
for (const selectedNode of selectedNodes) {
selectedNodeIds.add(selectedNode.id);
for (const edge of edges) {
if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
selectedEdgeIds.add(edge.id);
}
}
}
if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
prevSelectedNodesCount.current = selectedNodeIds.size;
const changes = getSelectionChanges(nodes, selectedNodeIds, true) as NodeChange[];
if (changes.length) {
onNodesChange?.(changes);
}
}
if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
prevSelectedEdgesCount.current = selectedEdgeIds.size;
const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
if (changes.length) {
onEdgesChange?.(changes);
}
}
store.setState({
userSelectionRect: nextUserSelectRect,
});
};
const onMouseUp = (event: ReactMouseEvent) => {
if (event.button !== 0) {
return;
}
const { userSelectionRect } = store.getState();
// We only want to trigger click functions when in selection mode if
// the user did not move the mouse.
if (!userSelectionActive && userSelectionRect && event.target === container.current) {
onClick?.(event);
}
store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
resetUserSelection();
onSelectionEnd?.(event);
};
const onMouseLeave = (event: ReactMouseEvent) => {
if (userSelectionActive) {
store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
onSelectionEnd?.(event);
}
resetUserSelection();
};
const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
return (
<div
className={cc(['react-flow__pane', { dragging, selection: isSelecting }])}
onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
onContextMenu={wrapHandler(onContextMenu, container)}
onWheel={wrapHandler(onWheel, container)}
onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
onMouseDown={hasActiveSelection ? onMouseDown : undefined}
onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
onMouseUp={hasActiveSelection ? onMouseUp : undefined}
onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
ref={container}
style={containerStyle}
>
{children}
<UserSelection />
</div>
const selectedNodes = getNodesInside(
nodes,
nextUserSelectRect,
transform,
selectionMode === SelectionMode.Partial,
true,
nodeOrigin
);
}
);
Pane.displayName = 'Pane';
const selectedEdgeIds = new Set<string>();
const selectedNodeIds = new Set<string>();
export default Pane;
for (const selectedNode of selectedNodes) {
selectedNodeIds.add(selectedNode.id);
for (const edge of edges) {
if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
selectedEdgeIds.add(edge.id);
}
}
}
if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
prevSelectedNodesCount.current = selectedNodeIds.size;
const changes = getSelectionChanges(nodes, selectedNodeIds, true) as NodeChange[];
if (changes.length) {
onNodesChange?.(changes);
}
}
if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
prevSelectedEdgesCount.current = selectedEdgeIds.size;
const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
if (changes.length) {
onEdgesChange?.(changes);
}
}
store.setState({
userSelectionRect: nextUserSelectRect,
});
};
const onMouseUp = (event: ReactMouseEvent) => {
if (event.button !== 0) {
return;
}
const { userSelectionRect } = store.getState();
// We only want to trigger click functions when in selection mode if
// the user did not move the mouse.
if (!userSelectionActive && userSelectionRect && event.target === container.current) {
onClick?.(event);
}
store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
resetUserSelection();
onSelectionEnd?.(event);
};
const onMouseLeave = (event: ReactMouseEvent) => {
if (userSelectionActive) {
store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
onSelectionEnd?.(event);
}
resetUserSelection();
};
const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
return (
<div
className={cc(['react-flow__pane', { dragging, selection: isSelecting }])}
onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
onContextMenu={wrapHandler(onContextMenu, container)}
onWheel={wrapHandler(onWheel, container)}
onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
onMouseDown={hasActiveSelection ? onMouseDown : undefined}
onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
onMouseUp={hasActiveSelection ? onMouseUp : undefined}
onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
ref={container}
style={containerStyle}
>
{children}
<UserSelection />
</div>
);
}
packages/react/src/container/ReactFlow/Wrapper.tsx
+2 -6
View File
@@ -1,10 +1,10 @@
import { useContext, type ReactNode } from 'react';
import StoreContext from '../../contexts/RFStoreContext';
import ReactFlowProvider from '../../components/ReactFlowProvider';
import { ReactFlowProvider } from '../../components/ReactFlowProvider';
import type { Node, Edge } from '../../types';
function Wrapper({
export function Wrapper({
children,
nodes,
edges,
@@ -39,7 +39,3 @@ function Wrapper({
</ReactFlowProvider>
);
}
Wrapper.displayName = 'ReactFlowWrapper';
export default Wrapper;
packages/react/src/container/ReactFlow/index.tsx
+7 -8
View File
@@ -5,19 +5,18 @@ import {
PanOnScrollMode,
SelectionMode,
infiniteExtent,
isMacOs,
type NodeOrigin,
type Viewport,
isMacOs,
} from '@xyflow/system';
import Attribution from '../../components/Attribution';
import SelectionListener from '../../components/SelectionListener';
import StoreUpdater from '../../components/StoreUpdater';
import A11yDescriptions from '../../components/A11yDescriptions';
import { A11yDescriptions } from '../../components/A11yDescriptions';
import { Attribution } from '../../components/Attribution';
import { SelectionListener } from '../../components/SelectionListener';
import { StoreUpdater } from '../../components/StoreUpdater';
import { useColorModeClass } from '../../hooks/useColorModeClass';
import GraphView from '../GraphView';
import Wrapper from './Wrapper';
import { GraphView } from '../GraphView';
import { Wrapper } from './Wrapper';
import type { ReactFlowProps, ReactFlowRefType } from '../../types';
export const initNodeOrigin: NodeOrigin = [0, 0];
packages/react/src/container/Viewport/index.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ type ViewportProps = {
children: ReactNode;
};
export default function Viewport({ children }: ViewportProps) {
export function Viewport({ children }: ViewportProps) {
const transform = useStore(selector);
return (
packages/react/src/container/ZoomPane/index.tsx
+3 -5
View File
@@ -27,7 +27,7 @@ const selector = (s: ReactFlowState) => ({
lib: s.lib,
});
const ZoomPane = ({
export function ZoomPane({
onPaneContextMenu,
zoomOnScroll = true,
zoomOnPinch = true,
@@ -47,7 +47,7 @@ const ZoomPane = ({
noPanClassName,
onViewportChange,
isControlledViewport,
}: ZoomPaneProps) => {
}: ZoomPaneProps) {
const store = useStoreApi();
const zoomPane = useRef<HTMLDivElement>(null);
const { userSelectionActive, lib } = useStore(selector, shallow);
@@ -142,6 +142,4 @@ const ZoomPane = ({
{children}
</div>
);
};
export default ZoomPane;
}
packages/react/src/hooks/useVisibleEdgeIds.ts
+1 -3
View File
@@ -12,7 +12,7 @@ import { type ReactFlowState } from '../types';
* @param onlyRenderVisible
* @returns array with visible edge ids
*/
function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
export function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
const edgeIds = useStore(
useCallback(
(s: ReactFlowState) => {
@@ -52,5 +52,3 @@ function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
return edgeIds;
}
export default useVisibleEdgeIds;
packages/react/src/hooks/useVisibleNodeIds.ts
+1 -3
View File
@@ -20,10 +20,8 @@ const selector = (onlyRenderVisible: boolean) => (s: ReactFlowState) => {
* @param onlyRenderVisible
* @returns array with visible node ids
*/
function useVisibleNodeIds(onlyRenderVisible: boolean) {
export function useVisibleNodeIds(onlyRenderVisible: boolean) {
const nodeIds = useStore(useCallback(selector(onlyRenderVisible), [onlyRenderVisible]), shallow);
return nodeIds;
}
export default useVisibleNodeIds;
packages/react/src/index.ts
+7 -7
View File
@@ -1,16 +1,16 @@
export { default as ReactFlow } from './container/ReactFlow';
export { default as Handle, type HandleComponentProps } from './components/Handle';
export { default as EdgeText } from './components/Edges/EdgeText';
export { Handle, type HandleComponentProps } from './components/Handle';
export { EdgeText } from './components/Edges/EdgeText';
export { StraightEdge } from './components/Edges/StraightEdge';
export { StepEdge } from './components/Edges/StepEdge';
export { BezierEdge } from './components/Edges/BezierEdge';
export { SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
export { SmoothStepEdge } from './components/Edges/SmoothStepEdge';
export { default as BaseEdge } from './components/Edges/BaseEdge';
export { default as ReactFlowProvider } from './components/ReactFlowProvider';
export { default as Panel, type PanelProps } from './components/Panel';
export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
export { default as ViewportPortal } from './components/ViewportPortal';
export { BaseEdge } from './components/Edges/BaseEdge';
export { ReactFlowProvider } from './components/ReactFlowProvider';
export { Panel, type PanelProps } from './components/Panel';
export { EdgeLabelRenderer } from './components/EdgeLabelRenderer';
export { ViewportPortal } from './components/ViewportPortal';
export { useReactFlow } from './hooks/useReactFlow';
export { useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';